<template>
    <div class="app">
        <h1>{{msg}}，学生姓名是：{{studentName}}</h1>
        <!--通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
        <School :getSchoolName = 'getSchoolName'/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (第一种写法，使用@或者v-on)-->
        <!-- <Student v-on:xuesheng='getStudentName'/> -->
        <!-- <Student @xuesheng.once='getStudentName'  @demo='m1'/>   -->

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (第二种写法，使用ref)-->
        <!-- .native相当于把事件交给了Student组件最外侧的元素，即div -->
        <Student ref="student" @click.native="show"/>
    </div>
</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'

    export default {
        name:'App',
        components:{
            Student,
            School
        },  
        data(){
            return{
                msg:'你好啊!',
                studentName:''
            }
        },
        methods:{
            getSchoolName(name){
                console.log('App收到了学校名： ',name)
            },
            getStudentName(name,...params){
                console.log('App收到了学生名：', name,params),
                this.studentName = name
            },
            m1(){
                console.log('demo事件被触发了')
            },
            show(){
                alert(123)
            }
        },
        mounted(){
            // 绑定自定义事件，可以加定时器，更加灵活

            // setTimeout(()=>{
            //     this.$refs.student.$on('xuesheng',this.getStudentName) 
            // },3000)

            // this.$refs.student.$once('xuesheng',this.getStudentName)  //触发一次
            this.$refs.student.$on('xuesheng',this.getStudentName)  //推荐写法

            //this指向student实例
            // this.$refs.student.$on('xuesheng',function(name,...params){
            //     console.log('App收到了学生名：', name,params),
            //     this.studentName = name
            // }) 

            // 改用箭头函数 this指向App
            // this.$refs.student.$on('xuesheng',(name,...params)=>{
            //     console.log('App收到了学生名：', name,params),
            //     this.studentName = name
            // }) 
        }
}
</script>

<style>
/* 一般APP中不加scoped */
    .app{
        background-color: gray;
        padding: 5px;
    }

</style>
